<template>
  <div style="display: flex">
    <transition name="el-zoom-in-center">
      <div style="display: flex;flex-direction: column;width: 200px;" v-show="isShow">
        <el-header>
          <svg-icon class="primary" :icon-class="icon"/>
          <span class="primary">{{title}}</span>
        </el-header>
        <el-tree style="height: calc(100vh - 146px);overflow: auto;" highlight-current :data="department" :props="defaultProps" node-key="id"
                 ref="treeForm"
                 :expand-on-click-node="false"
                 @node-click="handleNodeClick">
            <span style="position: relative;width: 100%" class="slot-t-node" slot-scope="{ node, data }">
                <i :class="{'el-icon-office-building primary': data.type==0, 'el-icon-school':data.type==1}"/>
                <el-tooltip :enterable="false" :content="data.name" placement="top-start">
                      <span style="display: inline-block; width: 60%; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;">{{ data.name }}</span>
                </el-tooltip>
                <div
                v-if="stockshow!=true"
                  style="position: absolute;right: 24px;display: flex;flex-direction: row;justify-content: center;align-items: center;top: 0">
                  <i style="color: #409EFF" v-show="categoryId == data.id" @click="upwardClick(data)"
                     class="el-icon-top"></i>
                  <i style="color: #409EFF" v-show="categoryId == data.id" @click="downClick(data)"
                     class="el-icon-bottom"></i>
                </div>
            </span>
        </el-tree>
      </div>
    </transition>
    <div class="leftBotton_Css" @click="leftBotton">
      <a style="width: 100%">
        <div class="left_css">
          <i :class="[isShow ?'el-icon-caret-left':'el-icon-caret-right']"></i>
        </div>
      </a>
    </div>
  </div>
</template>
<script>
  import utils from '../../utils/utils.js'
  import request from '@/utils/request'
  export default {
    data() {
      return {
        isShow: true,
        categoryId: '',
        sorting: [],
      }
    },
    props: {
      department: {type: Array, default: () => []},
      defaultProps: {},
      icon: '',
      title: '',
      request:'',
      stockshow:''
    },
    methods: {
      leftBotton: function () {
        this.isShow = !this.isShow
      },
      handleNodeClick(data) {
        console.log(data);
        this.$emit('handleNodeClick', data);
        this.categoryId = data.id
      },
      upwardClick(data) {
        var _this = this;
        console.log(data);
        _this.sorting = [];
        event.stopPropagation();
        if (!utils.isNull(data.parentId)) {
          const obj = utils.findTree(data.parentId, _this.department)
          obj.childrens.forEach(function (item, index) {
            if (item.id == data.id) {
              if (index > 0) {
                var form = item;
                _this.$refs.treeForm.remove(item);
                _this.$refs.treeForm.insertBefore(form, obj.childrens[index - 1]);
                console.log(_this.department)
              }
            }
          });
          obj.childrens.forEach(function (item, index) {
            var sorting = {
              id: item.id,
              dataSort: index + 1,
              name: item.name
            }
            _this.sorting.push(sorting)
          })
        } else {
          // 没父节点就肯定是根结点
          _this.department.forEach(function (item, index) {
            if (item.id == data.id) {
              if (index > 0) {
                var form = item;
                _this.$refs.treeForm.remove(item);
                _this.$refs.treeForm.insertBefore(form, _this.department[index - 1]);
              }
            }
          });
          _this.department.forEach(function (item, index) {
            var sorting = {
              id: item.id,
              dataSort: index + 1,
              name: item.name
            }
            _this.sorting.push(sorting)
          })
        }
        _this.sorting.forEach(function (item) {
          _this.sortClick(item)
        })
      },
      downClick(data) {
        var _this = this
        event.stopPropagation();
        var orders = '';
        var form = {};
        var indexs = '';
        _this.sorting = []
        if (!utils.isNull(data.parentId)) {
          const obj = utils.findTree(data.parentId, _this.department);
          orders = obj.childrens.length
          obj.childrens.forEach(function (item, index) {
            if (item.id == data.id) {
              form = item;
              indexs = index;
            }
          });
          //写在for循环里面会有问题
          if (indexs < orders - 1) {
            _this.$refs.treeForm.remove(form);
            _this.$refs.treeForm.insertAfter(form, obj.childrens[indexs]);
          }
          obj.childrens.forEach(function (item, index) {
            var sorting = {
              id: item.id,
              dataSort: index + 1,
              name: item.name
            };
            _this.sorting.push(sorting)
          })
          console.log(_this.sorting)
        } else {
          // 没父节点就肯定是根结点
          orders = _this.department.length
          _this.department.forEach(function (item, index) {
            if (item.id == data.id) {
              form = item;
              indexs = index;
            }
          });
          //写在for循环里面会有问题
          if (indexs < orders - 1) {
            _this.$refs.treeForm.remove(form);
            _this.$refs.treeForm.insertAfter(form, _this.department[indexs]);
          }
          _this.department.forEach(function (item, index) {
            var sorting = {
              id: item.id,
              dataSort: index + 1,
              name: item.name
            }
            _this.sorting.push(sorting)
          })
        }
        _this.sorting.forEach(function (item) {
          _this.sortClick(item)
        })
      },
      sortClick(sorting) {
        request({
          url: '/admin/'+this.request+'/update',
          method: 'post',
          data:sorting
        }).then(response => {
          console.log('2222222222222222222');
          console.log(response)
        }).catch(error => {
        })
      }
    }
  }
</script>

<style scoped>


  .leftBotton_Css {
    min-height: calc(100vh - 84px);
    background-color: #f2f2f2;
    width: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .left_css {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #999999;
    border-radius: 2px;
  }

  .rightLayout {
    width: 100%;
    height: 100%;
  }

  .el-header {
    border-bottom: 1px solid #f2f2f2;
    color: #333;
    line-height: 60px;
  }


  .el-menu {
    border: none !important;
  }

  .user_el-form-item {
    margin-bottom: 0 !important;
  }

  .el-mainBox {
    padding: 0 !important;
  }

  .el-headerTitle {
    font-size: 20px;
    color: #409EFF;
  }
</style>
